<!-- 表单 -->
<template>
  <div class="invitation">
    <div class="wCen">
      <div class="formBox">
        <el-form ref="refForm" :model="ruleForm" :rules="formValidate" label-width="0" label-position="top" size="medium">
          <el-form-item label="公司名称" prop="companyName" ref="companyName">
            <el-input v-model="ruleForm.companyName" :maxlength="100" clearable placeholder="请输入公司名称" />
          </el-form-item>
          <el-form-item label="姓名" prop="name" ref="name">
            <el-input v-model="ruleForm.name" :maxlength="50" clearable placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="部门" prop="dept" ref="dept">
            <el-input v-model="ruleForm.dept" :maxlength="50" clearable placeholder="请输入部门" />
          </el-form-item>
          <el-form-item label="职位" prop="job" ref="job">
            <el-input v-model="ruleForm.job" :maxlength="50" clearable placeholder="请输入职位" />
          </el-form-item>
          <el-form-item label="国籍" prop="nationality" ref="nationality">
            <el-select size="medium" clearable v-model="ruleForm.nationality" @change="changeCountry" placeholder="请选择国籍" class="sel" style="width: 100%">
              <el-option v-for="item in countryList" :key="item.id" :label="item.label" :value="item.label"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区" prop="area" ref="area" v-if="isChina">
            <el-cascader v-model="ruleForm.area" :options="listCascaderProvince" @change="handleChangeArea" clearable style="width: 100%" placeholder="请进行地区选择"></el-cascader>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile" ref="mobile">
            <el-input v-model.trim="ruleForm.mobile" :maxlength="20" clearable placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="code" label="验证码">
            <div class="inputBox">
              <div class="inputLeft">
                <el-input v-model="ruleForm.code" :placeholder="$t('login-placeholder-sms')" clearable></el-input>
              </div>
              <div class="inputRight">
                <common-countdown-button ref="countDown" :autoCountDown="false" :loading="sending" :text="getSms" :suffixText="$t('suffixText')" @on-click="sendSmsCodeFun" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" ref="email">
            <el-input v-model.trim="ruleForm.email" :maxlength="50" clearable placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item :label='isChina?"身份证号":"护照号"' prop="idCard" ref="idCard">
            <el-input v-model="ruleForm.idCard" :maxlength="50" clearable :placeholder='isChina?"请输入身份证号":"请输入护照号"' />
          </el-form-item>
          <div class="btnBox">
            <span class="btn" @click="handleSubmit">提交</span>
            <span class="btn btn-border" @click="closeForm">返回</span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { submit } from "@/api/invitation";
import { validateMobile, validateEmail, validateIDCard ,isMobile} from "@/libs/validate";
import jsonData from "@/plugins/pca-code.json";
import { getCountryList } from "@/api/common";
import { sendSmsCode } from "@/api/login";
export default {
  props: {
    eid: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      ruleForm: {
        cityCode: "",
        companyName: "",
        dept: "",
        districtCode: "",
        email: "",
        exhibitorId: "",
        idCard: "",
        job: "",
        mobile: "",
        name: "",
        nationality: "",
        provinceCode: "",
        area: "",
        code:""
      },
      formValidate: {
        companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        dept: [{ required: true, message: "请输入部门", trigger: "blur" }],
        idCard: [
          {
            required: true, trigger: "blur",
            validator: (rule,value,callback) => { 
              if (!value) { 
                callback(new Error(this.isChina?"请输入身份证号":"请输入护照号"));
                return;
              }
              callback();
            }
},
          {
            validator: this.isChina?validateIDCard:'',
            trigger: "blur",
          }, 
        ],
        job: [{ required: true, message: "请输入职位", trigger: "blur" }],
        dept: [{ required: true, message: "请输入部门", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        nationality: [{ required: true, message: "请选择国籍", trigger: ["blur",'change'] }],
        // area: [{ required: true, message: "请输入省市区", trigger: "change" }],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: validateMobile,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: this.$t("login-no-data-sms"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            validator: validateEmail,
            trigger: "blur",
          },
        ],
      },
      countryList: [],
      getSms: this.$t("get-sms"),
      sending: false,
    };
  },
 
  computed: {
    exhibitorId() {
      return this.eid ? this.eid : "";
    },
    listCascaderProvince() {
      let list = JSON.parse(JSON.stringify(jsonData).replace(/"name"/g, '"label"'));
      list = JSON.parse(JSON.stringify(list).replace(/"code"/g, '"value"'));
      return list;
    },
    // 是中国
    isChina() { 
      if (this.ruleForm.nationality === "中国"||this.ruleForm.nationality==="") {
        return true
      } else {
        return false
      }
    },
    
  },
  mounted() {
    this.getCountryListFun();
  },
  methods: {
    // 获取手机验证码
    sendSmsCodeFun() {
      if (!this.ruleForm.mobile) {
        this.$message.error(this.$t("login-placeholder-mobile"));
        return;
      }
      if (!isMobile(this.ruleForm.mobile)) {
        this.$message.error(this.$t("login-placeholder-mobile-format"));
        return;
      }
      delete this.ruleForm.code;
      this.sending = true;
      this.getSms = this.$t("tip-sending");
      this.invoke(sendSmsCode, this.ruleForm.mobile).then((res) => {
        this.getSms = this.$t("get-sms");
        this.sending = false;
        if (res && res.code == 200) {
          this.$message.success(this.$t("sended-success"));
          // 开始倒计时
          this.$refs.countDown.startCountDown();
        }
      });
    },
    //获取国家
    getCountryListFun() {
      this.invoke(getCountryList).then((res) => {
        if (res && res.code == 200) {
          this.countryList = res.data;
        }
      });
    },
    changeCountry(data) {
      this.$refs.refForm.validateField('idCard')
    },
    reset() {
      this.$refs.refForm.resetFields();
    },
    closeForm() {
      this.$emit("closeForm");
      this.reset();
    },
    // 地区
    handleChangeArea(e) {
      this.ruleForm.provinceCode = e[0];
      this.ruleForm.cityCode = e[1];
      this.ruleForm.districtCode = e[2];
    },
    handleSubmit() {
      this.ruleForm.exhibitorId = this.exhibitorId;
      this.$refs.refForm.validate((valid, object) => {
        if (valid) {
          this.invoke(submit, this.ruleForm).then((res) => {
            if (res && res.code == 200) {
              this.jumpSuccess();
              this.reset();
              this.$emit("closeForm");
            }
          });
        } else {
          this.$message({
            showClose: true,
            type: "warning",
            duration: 4000,
            message: "请确保所有必填/必选项都填选了",
          });
          let str = [];
          for (let key in object) {
            object[key].map((item) => {
              str.push(item.message);
            });
            let dom = this.$refs[Object.keys(object)[0]];
            if (Object.prototype.toString.call(dom) !== "[object Object]") {
              dom = dom[0];
              break; //结束语句并跳出语句，进行下个语句执行
            }
            // 定位代码
            dom.$el.scrollIntoView({
              block: "center",
              behavior: "smooth",
            });
          }
          // 页面提示未通过校验字段项，并以逗号分隔
          this.$message.error(str[0]);
        }
      });
    },
    jumpSuccess() {
      // this.$message.success("感谢您的参与");
      this.jumpNormalPage('/invitation/success')
    },
  },
};
</script>

<style lang="scss" scoped>
.invitation {
  background-color: rgba(255, 255, 255, 0.95);
  padding-top: 30px;
  border-radius: 4px;
  .title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 18px;
  }
  .formBox {
    $h: 40px;
    $bg: #fbfdff;
    $border: #cdcdcd;
    :deep(.el) {
      &-form {
        &-item {
          &__label {
            font-size: 14px;
            padding-bottom: 0px;
          }
        }
      }
      &-input {
        font-size: 14px;
        &__inner {
          border-radius: 0;
          height: $h;
          background-color: $bg;
          border-color: $border;
          text-align: left;
        }
      }
    }
    .btnBox {
      padding: 30px 0 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        $c: #e35191;
        background: #e35191;
        font-size: 24px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
        width: 100px;
        height: 36px;
        font-size: 14px;
        &-border {
          margin-left: 10px;
          border: 1px solid $c;
          background: none;
          color: $c;
        }
      }
    }
    .inputBox {
      $wL: 55%;
      $wR: calc(100% - #{$wL} - 10px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .inputLeft {
        flex: 0 0 $wL;
        width: $wL;

        :deep(.el-input__inner) {
          width: 100%;
        }
      }

      .inputRight {
        flex: 0 0 $wR;
        width: $wR;

        :deep(.el-button) {
          width: 100%;
          height: 40px;
          font-size: 14px;
          background-color: #659bfd;
          border-color: #659bfd;
          color: #ffffff;
          border-radius: 0;
          padding:10px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
@media (max-width: 767px) {
  .el-popper {
    overflow: hidden;
    .el-cascader-panel {
      width: 100%;
    }
    .el-cascader__dropdown {
      font-size: 12px;
    }
    .el-cascader-menu {
      min-width: 100px;
    }
    .el-cascader-node {
      padding: 10px;
      &__label {
        padding: 0;
        padding-right: 10px;
      }
    }
    .el-scrollbar {
      .el-scrollbar__bar {
        opacity: 1 !important;
      }
    }
  }
}
</style>
